<template name="Scroller">
	<scroll-view
		class="Scroller"
		scroll-y="true"
		:lower-threshold="10"
		@scrolltolower="GetList"
		
		@scroll="scroll"
		:scroll-top="scrollTop"
		
		:refresher-enabled="pull"
		:refresher-triggered="triggered"
		@refresherrefresh="pullRefresh"
	>
		<slot></slot>
		<view class="info" v-if="loading">正在加载…</view>
		<block v-else>
			<view class="info" v-if="total > amount">- 下拉加载更多 -</view>
			<view class="info" v-if="total <= amount && total > 0">- 已经到底了 -</view>
			<view class="info" v-if="total == 0">- 没有任何数据 -</view>
		</block>
		
	</scroll-view>
</template>

<script>
	export default {
		props:{
			total:Number,//总数量
			amount:Number,//已有数量
			loading:Boolean,//是否加载中
			auto:Boolean,//是否组件载入后自动触发加载
			pull:Boolean,//是否开启下拉
		},
		data() {
			return {
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				
				triggered:false
			}
		},
		mounted(){
			this.auto && this.$emit('load');
		},
		methods: {
			scroll(e) {
				this.old.scrollTop = e.detail.scrollTop
			},
			//回到顶部
			goTop(e) {
				this.scrollTop = this.old.scrollTop
				this.$nextTick(()=> { this.scrollTop = 0 });
			},
			//下拉刷新
			pullRefresh(){
				this.triggered = true
				setTimeout(()=>{ this.triggered = false })
				this.$emit('pullRefresh')
			},
			/**
			 * 加载数据
			 * 注意事项
			 * 1. 加载中 不能触发
			 * 2. 数据全部加载完了，不能触发
			*/
			GetList(){//触发获取数据
				if(this.loading || this.total <= this.amount) return;
				this.$emit('load');
			}
		}
	}
</script>

<style  lang="scss" scoped>
	.Scroller{
		position: relative;
		height: 100%;
		width:100%;
		overflow: auto;
		-webkit-overflow-scrolling:touch;
		.info{
			height: 10vw;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #aaa;
			font-size: 3vw;
		}
		.empty{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			padding:20vw;
			.label{
				color: #333333;
				font-size: 5vw;
			}
			
		}
	}
</style>
